<template>
  <div>
    <img
      :src="picData"
      alt=""
    >
    <el-form
      ref="form"
      :model="form"
      label-width="110px"
      label-position="right"
    >
      <el-form-item label="输入框类型">
        <el-radio-group v-model="fillMode">
          <el-radio
            v-for="(v,i,k) in fillModes"
            :key="k"
            :label="v.val"
          >
            {{ v.name }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="填空模式">
        <el-radio-group v-model="defaultMode">
          <el-radio
            v-for="(v,i,k) in defaultModes"
            :key="k"
            :label="v.val"
          >
            {{ v.name }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="键盘类型">
        <el-radio-group v-model="boardType">
          <el-radio
            v-for="(v,i,k) in boardTypes"
            :key="k"
            :label="v.val"
          >
            {{ v.name }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="禁用下一空">
        <el-switch
          v-model="disableNextBtn"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
      <el-form-item label="空1">
        <input
          v-model="options[0].answer"
          type="text"
          @click.stop=""
          @focus.stop="open1"
        >
      </el-form-item>
      <el-form-item label="空2">
        <input
          v-model="options[1].answer"
          type="text"
          @click.stop=""
          @focus.stop="open2"
        >
        <input
          v-model="options[1].answer"
          type="text"
          @click.stop=""
          @focus.stop="open2"
        >
      </el-form-item>
    </el-form>
    <div class="img-wrap">
      <img :src="src" alt="">
    </div>
    <el-dialog
      :visible.sync="showPreviewDialog"
    >
      <div style="position: fixed; top: 100px; left: 0">
        fadsfasdf
        <div style="position: fixed; top: 0; left: 0;">
          fadsfasd
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import utils from '../libs/utils.js';

export default {
    name: 'Pc',
    data: function () {
        return {
            showPreviewDialog: false,
            picData: '',
            fillModes: [{ 'name': '特殊符号', val: 'special' }, { 'name': '客观', val: 'objective' }, { 'name': '主观', val: 'subjective' }],
            fillMode: 'objective',
            defaultModes: [{ 'name': '键盘', val: 0 }, { 'name': '手写', val: 1 }, { 'name': '笔迹', val: 2 }],
            defaultMode: 0,
            boardTypes: [{ 'name': '组合', val: 'combo' }, { 'name': '通用', val: 'public' }, { 'name': '数字', val: 'number' }, { 'name': '手写', val: 'handwriter' }, { 'name': '符号', val: 'symbol' }],
            boardType: 'public',
            options: [
                { maxLength: 10, subjectiveStatus: 2, answer: '' },
                { maxLength: 2, subjectiveStatus: 1, answer: '' },
            ],
            subject: 1,

            disableNextBtn: false,
            form: {},
            group: 9,
            openMode: 0,
            focusNum: 0,
            fillList: [],
            keyBordShadow: 0,
            IsRedo: false,
            src: '',
        };
    },
    watch: {
        form: {
            handler: function (val, older) {

            },
            deep: true, // 对象的深度验证
        },
    },
    mounted () {
        // this.open2();
    },
    methods: {

        // 打开优学键盘
        openanoahIm (num) {
            let _this = this;
            // 根据前一个空和当前空类型，以及前一个空输入类型，决定界面保留
            let nowMode = this.options[num].maxLength === 2 ? 'special' : this.options[num].subjectiveStatus === 2 ? 'objective' : 'subjective'; // 当前空类型
            let defaultMode = 0;

            if (nowMode === 'special' && this.openMode) { // 特殊填空区
                window.linpengKeyBoard.reset();
            } else if (nowMode === 'objective' && this.openMode) { // 客观题
                switch (this.openMode) {
                    case 1:
                        defaultMode = 1;
                        break;
                    case 2:
                        window.linpengKeyBoard.reset();
                        break;
                }
            } else if (nowMode === 'subjective' && this.openMode) { // 主观题
                switch (this.openMode) {
                    case 1:
                        defaultMode = 1;
                        break;
                    case 2:
                        defaultMode = 2;
                        break;
                }
            }
            // window.linpengKeyBoard.reset();
            let imparam = {
                rightAnswers: [],
                subject: this.subject,
                fillMode: nowMode,
                defaultMode: defaultMode,
                change: (key) => {
                    console.log(key);
                    if (key.type === 'openMode') {
                        if (key.data !== 3) this.openMode = key.data;
                        return;
                    }
                    this.insertKey(key);
                },
                closed: function () {
                    console.log('closed');
                    _this.keyBordShadow = 0;
                },
            };
            window.linpengKeyBoard.open(imparam);

            _this.openMode = defaultMode;
            _this.focusNum = num;
            _this.fillList.forEach(item => {
                item._props.focusNum = num;
            });

            // 手写键盘初始化
            if (navigator.userAgent.match(/CrossWalk/i)) {
                window.cordova.exec(
                    function (info) {
                        console.log('手写', info); // 监听所有数据，操作
                        info = JSON.parse(info);
                        if (info.type === 'close') { // 关闭键盘
                            _this.keyBordShadow = 0;
                            window.linpengKeyBoard && window.linpengKeyBoard.closed();
                        } else if (info.type === 'backspace') { // 回退键
                            _this.insertKey('delete');
                        } else if (info.type === 'space') { // 空格键
                            _this.insertKey('space');
                        } else if (info.type === 'next') { // 下一空
                            _this.insertKey('next');
                        } else if (info.type === 'deleteAll') { // 清空
                            _this.insertKey('deleteAll');
                        } else if (info.type === 'click_word') { // 选择
                            _this.insertKey(info.type + info.data);
                        } else if (info.type === 'preselection_word') { // 预选
                            _this.insertKey(info.type + info.data);
                        } else if (info.type === 'HandPaintImg' || info.type === 'choosePhoto') { // 插入图片
                            _this.insertKey(info.type + info.url);
                        } else if (info.type === 'openMode') { // 打开模式
                            if (info.data !== 3) {
                                _this.openMode = info.data;
                            }
                        }
                    },
                    function (failed) {
                        console.log(failed);
                    },
                    'PenRecog',
                    'open',
                    [this.param.env.apiDomain]);
            }
        },

        insertKey (val) {
            let self = this;
            console.log(122, val);
            this.src = val.picData;
            if (val === 'delete' && self.options[self.focusNum].answer) {
                self.options[self.focusNum].answer = self.options[self.focusNum].answer.substr(0, self.options[self.focusNum].answer.length - 1);
            } else if (val === 'next') {
                if (this.IsRedo) { // 重做
                    let allNum = this.options.length - 1;
                    let nextNum = this.focusNum + 1;
                    nextNum = nextNum > allNum ? 0 : nextNum;
                    if (this.options.every(item => item.answer !== '')) return; // 所有空都有答案
                    if (this.options[nextNum].answer === '') { // 下一空没答案
                        this.openanoahIm(nextNum);
                    } else {
                        this.insertKey('next', nextNum);
                    }
                    return;
                }
                if (this.focusNum >= this.options.length - 1) { // 最后一空
                    if (this.options.every(item => { return item.answer !== ''; })) { // 所有空都有答案，跳转到第一空
                        this.openanoahIm(0);
                        return;
                    }
                    for (let i = 0; i < this.options.length - 1; i++) {
                        if (this.options[i].answer === '') { // 定位到第一个没有答案那一空
                            this.openanoahIm(i);
                            break;
                        };
                    }
                } else { // 非最后一空
                    this.openanoahIm(++this.focusNum);
                };
            } else {
                this.options[this.focusNum].answer += val;
            }
        },

        // 监听手写，pad端
        listenPenRecog () {
            console.log('listenPenRecog');
            window.cordova.exec(
                info => {
                    info = JSON.parse(info);
                    if (info.type === 'close') { // 关闭键盘
                        this.imClosed();
                        window.linpengKeyBoard && window.linpengKeyBoard.closed();
                    } else if (info !== 'OK') {
                        let activeObj = this.vm.fabricCanvas.getActiveObject();
                        activeObj && activeObj.inputAnoahIM(info);
                    }
                },
                failed => {
                    console.log(failed);
                },
                'PenRecog',
                'open',
                [this.vm.paramData.env.apiDomain]);
        },

        open1 () {
            //   window.linpengKeyBoard.instance.boardType = '';
            this.focusNum = 0;
            var self = this;
            function change (val) {
                self.insertKey(val);
            };
            function closed (e) {
                console.log(e);
            };
            let imparam = {
            //     disableBtnMap: this.disableNextBtn ? ['next'] : [], // 禁用‘下一空’
            //     useSpecialSymbol: true, // 使用4字节的特殊字符
            //     defaultMode: this.defaultMode,
            //     fillMode: this.fillMode,
            //     type: this.boardType,
            //     change: change,
            //     closed: closed,
            // // handwriter: this.handwriter,

                // disableBtnMap: ['next'], // 禁用‘下一空’
                useSpecialSymbol: true, // 使用4字节的特殊字符
                subject: 2,
                // defaultMode: 1,
                change: change,
                closed: closed,
                beforeChangeType (p, data) {
                    console.log(p, data, 'p, data');
                },
                fillMode: 'subjective',
                lastBoardType: {
                    boardType: 'choosePhoto',
                    boardModel: 'chinese',
                },
                rightAnswers: ['\\frac {1} {2}1'],
            };
            if (utils.browerEnv().windows) {
                imparam.el = '#app';
            } else {
                this.listenPenRecog();
            }
            window.linpengKeyBoard.open(imparam);
            // ss.keyboardState = 'open';
        },

        open2 () {
            this.focusNum = 1;
            var self = this;
            function change (val) {
                console.log(121, val);
                self.picData = val.picData;
                self.insertKey(val);
            };
            function closed (e) {
                console.log(e);
            };
            let imparam = {
                // disableBtnMap: ['goback'], // 禁用‘下一空’
                useSpecialSymbol: true, // 使用4字节的特殊字符
                change: change,
                closed: closed,
                beforeChangeType: (p) => {
                    console.log(1, p);
                    // return false
                },
                // defaultMode: 1,
                fillMode: 'subjective',
                lastBoardType: {
                    boardType: 'symbol',
                    boardModel: '笔画',
                },
                rightAnswers: ['a'],
                subject: 2,
                // fillMode: 'tian',
                // type: 'syllable',

            // handwriter: this.handwriter,
            };
            if (utils.browerEnv().windows) {
                imparam.el = '#app';
            } else {
                this.listenPenRecog();
            }
            window.linpengKeyBoard.open(imparam);
            // ss.keyboardState = 'open';
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login {
  font-size: 14px;
}
  .img-wrap {
    border: 1px solid #ccc;
    background: #c8e2f7;
    padding: 20px;
  }
</style>
